<template>
  <div class="main">
    <el-card shadow="never" class="content-wrap">
      <Header></Header>
    </el-card>
    <div class="putBox">
      <div>
        <div class="languageBox">
          <div class="radioBox">
            <div>短语音识别</div>
            <el-radio-group v-model="radio1" size="large">
              <el-radio-button label="中文普通话" @change="shortVoliceClick(1537)" />
              <el-radio-button label="英语" @change="shortVoliceClick(1737)" />
              <el-radio-button label="粤语" @change="shortVoliceClick(1637)" />
              <el-radio-button label="四川话" @change="shortVoliceClick(1837)" />
            </el-radio-group>
          </div>
          <div class="radioBox">
            <div>音频文件转写</div>
            <el-radio-group v-model="radio2" size="large">
              <el-radio-button label="中文普通话" />
              <el-radio-button label="英语" />
              <el-radio-button label="音视频字幕 (中文)" />
            </el-radio-group>
          </div>
          <div class="radioBox">
            <div>实时语音识别</div>
            <el-radio-group v-model="radio3" size="large">
              <el-radio-button label="中文普通话" />
              <el-radio-button label="英语" />
              <el-radio-button label="音视频字幕 (中文)" />
            </el-radio-group>
          </div>
          <div class="radioBox">
            <div>文本合成</div>
            <el-radio-group v-model="radio4" size="large">
              <el-radio-button label="短文本合成" />
              <el-radio-button label="长文本合成" />
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="putVoiceBox" v-if="voliceEnum[cate] === '短语音识别'">
        <div class="voiceList" v-show="voiceLists.length !== 0">
          <div class="btnBox">
            <div class="addmore">
              <el-icon class="icon">
                <CirclePlus />
              </el-icon>
              <div>添加更多</div>
              <input id="input1" class="addVoice" type="file" accept="image/*,audio/*,video/*"
                @change="inputVoice($event)">
            </div>
            <div class="addmore" style="margin-left: 20px" @click="handleUpload">
              <el-icon class="icon">
                <Refresh />
              </el-icon>
              <div>提交转换</div>
            </div>
          </div>

          <div class="voiceBox" v-for="(item, index) in voiceLists" :key="index">
            <div class="Information">
              <el-icon v-if="item.type !== 'image'" class="icon">
                <VideoCamera />
              </el-icon>
              <el-icon v-else class="icon">
                <Picture />
              </el-icon>
              <div class="fileInformation">
                <div class="fileName">{{ item.name }}</div>
                <div class="fileSize">{{ item.size }}MB</div>
              </div>
            </div>
            <div class="controls">
              <el-tooltip content="预览" placement="top" v-if="item.isShow">
                <el-icon @click="openPreview(index)">
                  <View />
                </el-icon>
              </el-tooltip>
              <el-tooltip content="下载" placement="top" v-if="item.isShow">
                <el-icon @click="download(index)">
                  <Download />
                </el-icon>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-icon @click="deleteData(index)">
                  <Close />
                </el-icon>
              </el-tooltip>
            </div>
          </div>
        </div>

        <div class="putVoice" v-show="voiceLists.length === 0">
          <el-icon class="icon">
            <List />
          </el-icon>
          <div class="h3">点击添加音频、视频</div>
          <div class="h5">准确率最高97.5%·数据安全保护·支持音频和视频</div>
          <input id="input2" class="inputVoice" type="file" accept="audio/*,video/*" @change="inputVoice($event)">
        </div>
      </div>

      <audio-trans v-else-if="voliceEnum[cate] === '音频文件转写'" :text="radio2"></audio-trans>
      <text-synthesis v-else-if="voliceEnum[cate] === '文本合成'" :text="radio4"></text-synthesis>
    </div>


    <el-dialog v-model="showDialog" title="预览" width="400">
      <text-dialog :texts="previewData"></text-dialog>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getVliceIdentifyRes } from '@/api/identify'
import { ref, watch } from 'vue'
import TextDialog from '@/components/text-dialog/TextDialog.vue'
import AudioTrans from '@/components/AudioTrans/index.vue'
import TextSynthesis from '@/components/TextSynthesis/index.vue'
import useDownload from '@/hooks/useDownload'
const { downloadUrl, downloadFile } = useDownload()

const radio1 = ref()
const radio2 = ref()
const radio3 = ref()
const radio4 = ref()
const radio1Code = ref()
const radio1Index = ref(-1)
const voiceLists = ref<Array<any>>([])
const fileData = reactive({
  data: null,
  name: ''
})
const voiceRes = ref([])
const showDialog = ref(false)
const previewData = ref([])

const voliceEnum = {
  1: '短语音识别',
  2: '音频文件转写',
  3: '实时语音识别',
  4: '文本合成'
}

const cate = ref(1);

onMounted(() => {
  if (sessionStorage.getItem('them') === 'fff') {
    document.documentElement.style.setProperty("--main-shallowbg-color", '#454653')
    document.documentElement.style.setProperty("--main-bg-color", '#22252a')
    document.documentElement.style.setProperty("--main-font-color", '#fff')
    document.documentElement.style.setProperty("--main-shallowfont-color", '#fff')
    document.documentElement.style.setProperty("--main-shallowfont2-color", '#fff')
    document.documentElement.style.setProperty("--el-border-color", '#454653')
    document.documentElement.style.setProperty("--main-elbtn-color", '#454653')
  } else {
    document.documentElement.style.setProperty("--main-shallowbg-color", '#f2f3f4')
    document.documentElement.style.setProperty("--main-bg-color", '#fff')
    document.documentElement.style.setProperty("--main-font-color", '#303133')
    document.documentElement.style.setProperty("--main-shallowfont-color", '#d6d7d8')
    document.documentElement.style.setProperty("--main-shallowfont2-color", 'rgba(0, 0, 0, 0.46)')
    document.documentElement.style.setProperty("--el-border-color", '#dcdfe6')
    document.documentElement.style.setProperty("--main-elbtn-color", '#409eff')
  }
})

watch(() => radio1.value, (val) => {
  if (!val) return;
  radio2.value = null;
  radio3.value = null;
  radio4.value = null;
  cate.value = 1;
}, { immediate: true })

watch(() => voiceLists.value, (val) => {
  radio1Index.value = val.length - 1;
}, { deep: true })

watch(() => radio2.value, (val) => {
  if (!val) return;
  radio1.value = null;
  radio3.value = null;
  radio4.value = null;
  cate.value = 2;
}, { immediate: true })
watch(() => radio3.value, (val) => {
  if (!val) return;
  ElMessage({
    dangerouslyUseHTMLString: true,
    message: `暂不支持此功能`,
    type: 'warning'
  })
  radio1.value = null;
  radio2.value = null;
  radio4.value = null;
  // cate.value = 3;
}, { immediate: true })

watch(() => radio4.value, (val) => {
  if (!val) return;
  radio1.value = null;
  radio2.value = null;
  radio3.value = null;
  console.log(val);
  
  cate.value = 4;
}, { immediate: true })

const shortVoiceReg = /^(pcm|wav|amr)$/;
const voiceTransToTextReg = /^(pcm|wav|amr|mp3|m4a)$/;

const feachVoiceIdentify = () => {
  const index = voiceLists.value.length - 1;
  // voiceLists.value[index].isShow = false;
  const formData = new FormData();
  formData.append('file', fileData.data, fileData.name);
  formData.append('code', `${radio1Code.value}`);

  getVliceIdentifyRes(formData).then((res: any) => {
    if (!res.result) {
      ElMessage({
        message: '转换失败',
        type: 'warning'
      })
      return;
    }

    voiceRes.value.push(res.result);
    voiceLists.value[index].isShow = true;
    console.log(res);
  })
}

const handleRadio1Change = (fileObj) => {
  if (voiceLists.value.length === 1) {
    ElMessage({
      message: `暂不支持上传多个音频文件`,
      type: 'warning'
    })
    return;
  }

  if (!voiceTransToTextReg.test(fileObj.type)) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: `不支持${fileObj.type}类型的音频文件`,
      type: 'warning'
    })
  } else {
    voiceLists.value.push(fileObj);
  }
}

// 选择文件提交
function inputVoice(e) {
  let size = e.target.files[0].size / 1024 / 1024
  let fileObj = {
    name: e.target.files[0].name,
    size: size.toFixed(2),
    type: e.target.files[0].type.split('/')[1]
  }

  fileData.data = e.target.files[0];
  fileData.name = e.target.files[0].name;

  if (radio1.value) {
    const size = 1048576 / 1024 / 1024;
    if ((fileObj.size as any) >= size) {
      ElMessage({
        message: `文件大小不能超过${size}MB`,
        type: 'error'
      })
      return;
    } else {
      handleRadio1Change(fileObj)
    }
  } else if (radio2.value) {

  } else {
    ElMessage({
      message: `请选择识别类型,再上传文件`,
      type: 'warning'
    })
  }


  (<HTMLInputElement>document.getElementById('input1')).value = '';
  (<HTMLInputElement>document.getElementById('input2')).value = '';
}

// 上传
const handleUpload = () => {
  feachVoiceIdentify()
}

// 短语音识别
const shortVoliceClick = (code: number) => {
  radio1Code.value = code
}

// 删除
function deleteData(index) {
  voiceLists.value.splice(index, 1);
  fileData.data = null;
  fileData.name = '';
  (<HTMLInputElement>document.getElementById('input1')).value = '';
  (<HTMLInputElement>document.getElementById('input2')).value = '';
}

// 预览
const openPreview = (index) => {
  showDialog.value = true;
  previewData.value = voiceRes.value[index];
}

// 下载
const download = (index) => {
  const res = voiceRes.value[index];
  const text = res.map((item) => {
    return item;
  }).join();
  
  downloadUrl.value = `data:text/plain;charset=utf-8,${text}`;
  downloadFile(downloadUrl.value, '转换文本.txt')
}
</script>

<style lang="scss" scoped>
  :deep(.el-dialog__body) {
    padding: 10px 0 10px 10px;
  }


  .main {
    min-height: 1000px;
    // padding: 20px;
    background-color: var(--main-shallowbg-color);
  }

  // .putBox {
  //   // width: 90%;
  //   // margin: 50px auto;
  //   // display: flex;
  //   // justify-content: space-around;
  // }
  .inputVoice {
    opacity: 0.0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
  }

  .btnBox {
    display: flex;
  }

  .voiceList {
    overflow: auto;
    // width: 100%;
    height: 400px;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    border-radius: 10px;
    // display: flex;
    padding: 20px;

    .addmore {
      width: 40%;
      height: 40px;
      border-radius: 10px;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;

      .addVoice {
        opacity: 0.0;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: absolute;
      }
    }

    .voiceBox:hover {
      box-shadow: 3px 4px 5px var(--main-shallowfont-color);
    }

    .voiceBox {
      transition-property: all;
      transition-duration: 0.3s;
      margin-top: 30px;
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--main-shallowfont-color);

      .Information {
        flex: 1;
        display: flex;
      }

      .controls {
        width: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 24px;
      }

      .controls .el-icon:hover {
        color: #237df7;
      }

      .controls .el-icon {
        cursor: pointer;
      }

      .icon {
        font-size: 35px;
      }

      .icon2 {
        font-size: 20px;
      }

      .fileInformation {
        margin: 0 20px;

        .fileName {
          font-size: 13px;
          font-weight: 600;
        }

        .fileSize {
          margin-top: 5px;
          font-size: 10px;
          color: var(--main-shallowfont2-color);
        }
      }
    }
  }

  .putVoice:hover {
    box-shadow: 9px 8px 12px var(--main-shallowfont-color);
  }

  .putVoiceBox {
    width: 90%;
    height: 300px;
    margin: 10px auto;
  }

  .putVoice {
    position: relative;
    transition-property: all;
    transition-duration: 0.6s;
    width: 100%;
    height: 300px;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;

    .icon {
      font-size: 60px;
      margin-top: -60px;
      margin-bottom: 20px;
    }

    .h3 {
      font-size: 25px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .h5 {
      color: #969696;
    }
  }

  .languageBox {
    background-color: var(--main-shallowbg-color);
    // width: 60%;
    // height: 400px;
    padding: 10px;
    color: var(--main-font-color);
  }

  .radioBox {
    margin-top: 10px;
  }

  :deep(.el-radio-group) {
    margin: 10px;
  }

  :deep(.el-radio-button__inner) {
    color: var(--main-font-color);
    background-color: var(--main-bg-color);
  }

  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
    color: var(--main-bg-color);
    background-color: var(--main-font-color);
    border: var(--main-font-color);
    box-shadow: none;
  }

  @media screen and (min-width: 600px) {
    .main {
      min-height: 1000px;
      // padding: 20px;
      background-color: var(--main-shallowbg-color);
    }

    .putBox {
      width: 90%;
      margin: 50px auto;
      display: flex;
      justify-content: space-around;
    }

    .inputVoice {
      opacity: 0.0;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
    }

    .btnBox {
      display: flex;
    }

    .voiceList {
      width: 100%;
      height: 400px;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
      border-radius: 10px;
      // display: flex;
      padding: 20px;

      .addmore {
        width: 20%;
        height: 40px;
        border-radius: 10px;
        border: 1px solid;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;

        .addVoice {
          opacity: 0.0;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          position: absolute;
        }
      }

      .voiceBox:hover {
        box-shadow: 3px 4px 5px var(--main-shallowfont-color);
      }

      .voiceBox {
        transition-property: all;
        transition-duration: 0.6s;
        margin-top: 30px;
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--main-shallowfont-color);

        .Information {
          display: flex;
          width: 90%;
        }

        .icon {
          font-size: 40px;
        }

        .icon2 {
          font-size: 20px;
        }

        .fileInformation {
          margin: 0 20px;

          .fileName {
            font-size: 17px;
            font-weight: 600;
          }

          .fileSize {
            margin-top: 5px;
            font-size: 14px;
            color: var(--main-shallowfont2-color);
          }
        }
      }
    }

    .putVoice:hover {
      box-shadow: 9px 8px 12px var(--main-shallowfont-color);
    }

    .putVoiceBox {
      width: 50%;
      height: 400px;
    }

    .putVoice {
      position: relative;
      transition-property: all;
      transition-duration: 0.6s;
      width: 100%;
      height: 400px;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 10px;

      .icon {
        font-size: 60px;
        margin-top: -60px;
        margin-bottom: 20px;
      }

      .h3 {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .h5 {
        color: #969696;
      }
    }

    .languageBox {
      background-color: var(--main-shallowbg-color);
      // width: 60%;
      height: 400px;
      padding: 30px 40px 30px 30px;
      color: var(--main-font-color);
    }

    .radioBox {
      margin: 30px;
    }
  }
</style>